<template>
  <header class="header">
    <div class="logo">小花在线</div>
    <div class="login-status">
      <!-- 移除头像容器，改为文字状态显示 -->
      <span v-if="!userStore.library_token" @click="goToLogin" class="login-text">请登录</span>
      <span v-else class="username">{{ userStore.library_user?.username }}</span>
    </div>
  </header>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();

// 移除头像相关代码
const goToLogin = () => {
  router.push('/login');
};
</script>

<style lang="scss" scoped>
.header {
  // 保持原有布局样式不变...
  .login-status {
    cursor: pointer;
    color: #333;
    .login-text:hover,
    .username:hover {
      color: #409eff;
    }
  }

  // 移除所有.avatar-container和.avatar的样式规则
  @media (max-width: 768px) {
    padding: 8px 15px;
    .logo {
      font-size: 1em;
    }
    // 移除移动端头像适配样式
  }

  @media (max-width: 480px) {
    padding: 6px 10px;
    // 移除移动端头像适配样式
  }
}
</style>